@extends('layouts.default')

@section('title')
设备信息查询
@stop

@section('pre')
<li class="active"><span>@yield('title')</span></li>
@stop

@section('content')
<div class="row">
    <div class="col-lg-12">
        <div class="main-box">
            <header class="main-box-header clearfix">
                <h2>分组信息</h2>
            </header>
            <div class="main-box-body clearfix">
                <form role="form">
                    <div class="btn-group" data-toggle="buttons" id="groupList">
                        <label class="btn btn-primary">
                            <input type="radio" name="options" id="all"> 全部
                        </label>
                        @if( isset($groupData) && !empty($groupData) )
                        @foreach ($groupData as $key => $name)
                        <label class="btn btn-primary">
                            <input type="radio" name="options" id="{{ $key }}"> {{ $name }}
                        </label>
                        @endforeach
                        @endif
                    </div>
                </form>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <header class="main-box-header clearfix">
                        <h2 class="pull-left" id="group-table-title"></h2>
                        <div id="reportrange" class="pull-right daterange-filter">
                            <i class="icon-calendar"></i>
                            <span></span><b class="caret"></b>
                        </div>
                    </header>
                    <div class="main-box-body clearfix">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>
                                            <!-- <a href="#"><span></span></a> -->
                                            硬件序列号
                                        </th>
                                        <th>
                                            <!-- <a href="#"><span></span></a> -->
                                            通讯序列号
                                        </th>
                                        <th>
                                            <!-- <a href="#"><span></span></a> -->
                                            是否发放
                                        </th>
                                        <td class="text-center">
                                            操作
                                        </td>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach( $deviceData as $device )
                                    <tr id="{{ $device->id }}">
                                        <td style="display: none">
                                            {{ $device->title }}
                                        </td>
                                        <td style="display: none">
                                            {{ $device->mobile }}
                                        </td>
                                        <td>
                                            {{ $device->hardware_serial }}
                                        </td>
                                        <td>
                                            {{ $device->communication_serial }}
                                        </td>
                                        <td>
                                            {{ $device->status }}
                                        </td>
                                        <td class="text-center">
                                            @if( $device->status == '未发放' )
                                            <a type="button" href="{{ action('DeviceController@bind').'/'.$device->hardware_serial }}" class="btn btn-danger btn-xs">
                                                @else
                                                <a type="button" class="btn btn-danger btn-xs" disabled>
                                                    @endif
                                                    <span class="fa fa-plus-square"></span> 发放
                                                </a>
                                                <a type="button" class="btn btn-primary btn-xs md-trigger modal-info" data-modal="modal-info">
                                                    <span class="fa fa-search"></span> 详情
                                                </a>
                                                <!-- <a href="" class="btn ben-xs btn-success">续费</a>
                                                <a href="{{URL::to('deviceLog/'.$device->id)}}" target="_blank" class="btn btn-xs btn-default">查看充值日志</a> -->
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <ul class="pagination pull-right">
                            <?php echo $deviceData->render(); ?>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 详情信息 -->
<div class="md-modal md-effect-11" id="modal-info">
    <div class="md-content">
        <div class="modal-header">
            <button class="md-close close">&times;</button>
            <h4 class="modal-title">详情信息</h4>
        </div>
        <div class="modal-body">
            <form role="form">
                <div class="form-group col-lg-12">
                    <label for="exampleInputFile" class="col-lg-3 control-label">设备标题</label>
                    <div class="input-group col-lg-6">
                        <span class="input-group-addon"><i class="fa fa-info-circle"></i></span>
                        <input type="text" class="form-control modal-data-info" id="phone" disabled value="0">
                    </div>
                </div>
                <div class="form-group col-lg-12">
                    <label for="exampleTextarea" class="col-lg-3 control-label">绑定手机号</label>
                    <div class="input-group col-lg-6">
                        <span class="input-group-addon"><i class="fa fa-mobile"></i></span>
                        <input type="text" class="form-control modal-data-info" id="phone" disabled value="0">
                    </div>
                </div>
                <div class="form-group col-lg-12">
                    <label for="exampleTextarea" class="col-lg-3 control-label">硬件序列号</label>
                    <div class="input-group col-lg-6">
                        <span class="input-group-addon"><i class="fa fa-code-fork"></i></span>
                        <input type="text" class="form-control modal-data-info" id="phone" disabled value="0">
                    </div>
                </div>
                <div class="form-group col-lg-12">
                    <label for="exampleTextarea" class="col-lg-3 control-label">通讯序列号</label>
                    <div class="input-group col-lg-6">
                        <span class="input-group-addon"><i class="fa fa-code-fork"></i></span>
                        <input type="text" class="form-control modal-data-info" id="phone" disabled value="0">
                    </div>
                </div>
                <div class="form-group" style="text-align: center">
                    <a type="button" class="btn btn-info btn-xs" id="modal-edit">
                        修改
                    </a>
                    <button type="button" class="btn btn-danger btn-xs" id="modal-close">
                        关闭
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@stop

@section('js')

<script type="text/javascript">

    jQuery(document).ready(function () {

        var uri = "{{ url('deviceInfo') }}";

        $("#groupList > label").on('click', function () {

            window.location.href = uri + '/' + $(this).find('input').attr('id');

        })

        var group = '{{ $group }}';

        $("#groupList > label").removeClass('active');

        $("#" + group).parent().addClass('active');

        //设定表格标题
        $('#group-table-title').text($.trim($("#" + group).parent().text()) + '设备信息');

        //关闭详情
        $("#modal-close").on('click', function () {
            $(".md-close").click();
        });

        //详情
        $(".modal-info").on('click', function () {

            var trObj = $(this).parent().parent();

            for (var i = 0; i < 4; i++)
            {
                var dat = $.trim($(trObj).find("td").eq(i).html());
                $(".modal-data-info").eq(i).val(dat);
            }

            //跳转
            $("#modal-edit").attr('href', '{{ action("DeviceController@edit") }}' + '/' + trObj.attr('id'));

        });

    });

</script>

@stop